<template>
  <div>
    <NavBar />
    <div class="documentation">
      <div class="content-wrapper">
        <aside class="sidebar">
          <ul>
            <li><a :class="{active: currentSection === 'app-guidelines'}" @click="setCurrentSection('app-guidelines')">1. 应用合规指引</a></li>
            <li><a :class="{active: currentSection === 'integration-guide'}" @click="setCurrentSection('integration-guide')">2. 接入指南</a></li>
            <li><a :class="{active: currentSection === 'websdk'}" @click="setCurrentSection('websdk')">3.1 部署websdk</a></li>
            <li><a :class="{active: currentSection === 'uniappsdk'}" @click="setCurrentSection('uniappsdk')">3.2 uniapp接入</a></li>
            <li><a :class="{active: currentSection === 'contactus'}" @click="setCurrentSection('contactus')">联系我们</a></li>
          </ul>
        </aside>

        <main class="content">
          <div v-if="currentSection === 'app-guidelines'" id="app-guidelines">
            <h2>一、什么是Canvas指纹</h2>
            <p>Canvas指纹是一种通过浏览器Canvas API生成的独特标识。它利用浏览器对特定图形绘制指令的处理方式及呈现结果，结合设备和浏览器的相关特征，生成一串能标识您设备和浏览器环境的信息。此信息具有唯一性，类似于现实生活中的指纹。</p>
            
            <h2>二、我们如何收集Canvas指纹信息</h2>
            <p>当您访问我们的网站或应用程序时，我们的服务器会向您的浏览器发送包含Canvas指纹生成脚本的页面。该脚本在您的浏览器后台运行，无需您进行任何额外操作，即可自动收集生成Canvas指纹所需的数据。这些数据仅在您的浏览器端进行处理和生成指纹，不会传输原始的图形绘制数据到我们的服务器。</p>
            
            <h2>三、我们如何使用Canvas指纹信息</h2>
            <p>安全防护：用于识别异常登录行为和恶意攻击。通过比对不同登录尝试的Canvas指纹，我们能够及时发现并阻止来自未经授权设备的访问，保护您的账户安全。
              提升用户体验：借助Canvas指纹识别您的设备和浏览器环境，我们可以为您提供更个性化的服务。例如，自动调整页面布局和功能设置，以适配您的设备屏幕尺寸、分辨率及浏览器特性，从而为您带来更流畅的浏览和使用体验。
              分析与优化：收集的Canvas指纹信息将用于统计分析用户使用我们服务的设备类型和浏览器分布情况。这有助于我们了解用户群体的特征，以便针对性地优化服务，提升整体性能和兼容性。</p>
            
            <h2>四、如何使用Canvas指纹信息</h2>
            <p>仅在内部使用：我们不会将Canvas指纹信息出售、出租或共享给任何第三方用于营销或其他商业目的。这些信息仅在我们内部团队中使用，用于实现上述提及的安全防护、用户体验优化和服务分析等目的。
              与其他信息结合使用：在某些情况下，我们可能会将Canvas指纹信息与您提供的其他个人信息（如账户登录信息、浏览历史）相结合，以更全面地了解您的使用情况，为您提供更精准的服务和支持。但这种结合使用会严格遵循相关隐私法规和安全标准。</p>
            
            <h2>五、Canvas指纹信息的存储与保护</h2>
            <p>存储安全：我们采用行业标准的安全技术和措施来存储Canvas指纹信息。这些信息存储在安全的服务器环境中，访问受到严格的权限控制和身份验证机制的保护，以防止未经授权的访问、使用或披露。
              数据保留期限：我们只会在实现上述收集目的所需的最短时间内保留Canvas指纹信息。一旦这些目的达成，或者根据法律法规的要求，我们会及时删除或匿名化处理这些信息。</p>
          
            <h2>六、隐私政策</h2>
             <p>为遵守国家法律法规，所有APP均须向终端用户出示当前APP的《隐私政策》，在用户同意《隐私政策》之前，APP不能收集任何涉及隐私的设备信息(也不能执行XappTool SDK的初始化)，否则将面临APP被下架的风险。因此请开发者务必参照此文档做好安全合规相关事项，以免影响App正常上架。因此，
              1）您需要制定一份App《隐私政策》。《隐私政策》是说明App的个人信息收集和使用情况，获得用户的合法授权以及保护用户个人信息主体权利的重要文档，其内容应符合国家相关法律法规、政策及标准的规定及您与XappTool的协议约定。
              2）您的App《隐私政策》中须包含XappTool SDK收集使用个人设备信息的目的、方式和范围等，提供的数据安全保护标准应不低于和XappTool的协议约定。</p>
            
             
            <h2>七、隐私政策示例</h2>
            <p>
              SDK名称：XappTool SDK
              收集方式：SDK自行采集、调用系统相关接口自动采集
              处理个人信息类型：
                  设备信息：设备名称、操作系统、屏幕宽高分辨率、粘贴板(剪切板)信息
                  网络信息：IP地址
                  应用信息：应用标识符
              数据处理方式：XappTool采用数据加密技术对数据进行传输； 采用去标识匿名化方式对信息进行脱敏展示
              使用场景:用户使用相关功能时使用
              使用目的:应用数据统计、智能传参统计、渠道数据统计、分享数数据统计、作弊防护、移动广告效果监测
              隐私政策地址：https://xapptool.com/privacy.html
            </p>
            </div>



          <div v-if="currentSection === 'integration-guide'" id="integration-guide">
            <p>1 官网控制台,创建应用并完成配置,获取appkey</p>
            <p>2 部署websdk到你的app注册引导页面/app下载页/落地页 websdk，也可以使用官方的落地页</p>
            <p>3 集成XappToolsdk到APP uniapp接入 , 5+App接入 , wap2app接入</p>
          </div>

          <div v-if="currentSection === 'websdk'" id="websdk">
            <h3> 1 下载websdk（建议使用在线sdk 保证最新代码） <a href="https://sdk.xapptool.cn/web/xapptool.js">https://sdk.xapptool.cn/web/xapptool.js</a> </h3>
            <h3> 2 调用如下 </h3>
            <p class="code-content">
              <button class="copy-btn" @click="copyCode(websdkcode)">复制</button>
              <pre><code class="javascript">{{ websdkcode }}</code></pre>
            </p>
          </div>

          <div v-if="currentSection === 'uniappsdk'" id="uniappsdk">
            <h3> 1 下载uniappsdk（建议使用在线sdk 保证最新代码） <a href="https://sdk.xapptool.cn/uniapp/xapptool.js">https://sdk.xapptool.cn/uniapp/xapptool.js</a> </h3>
            <h3> 2 App.vue onLaunch 调用如下 </h3>
            <p class="code-content">
              <button class="copy-btn" @click="copyCode(uniappsdkcode)">复制</button>
              <pre><code class="javascript">{{ uniappsdkcode }}</code></pre>
            </p>
          </div>

          <div v-if="currentSection === 'contactus'" id="contactus">
            <h3> 1 微信: xiao142000 备注xapptool </h3>
            <h3> 2 QQ: 2018373239 备注xapptool </h3>
          </div>
          
        </main>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from '@/components/NavBar.vue';
// 引入 highlight.js 库
import hljs from 'highlight.js/lib/core';
import javascript from 'highlight.js/lib/languages/javascript';
import 'highlight.js/styles/default.css';

hljs.registerLanguage('javascript', javascript);

export default {
  components: {
    NavBar
  },
  computed: {
    },
  data() {
    return {
      currentSection: 'app-guidelines',
      websdkcode: `
        let xapptool = new XappTool();
        xapptool.init({app_key: 'your_app_key'}).then(function (res) {
            const appinfo = res.appInfo || {};
            const deviceInfo = res.deviceInfo || {};
            document.getElementById('appicon').src = appinfo.icon;
            document.getElementById('appbanner').src = appinfo.banner;
            document.getElementById('appname').innerHTML = appinfo.name;
        });
        // goto app store function
        function handleDownload() {
            xapptool.redirectToStore();
        }
      `,
      uniappsdkcode: `
      let xapptool = new XappTool();
      let customData = await xapptool.init({app_key: 'your_app_key'})
      console.log('customData',customData)
      `
    }
  },
  methods: {
    setCurrentSection(section) {
      this.currentSection = section;
    },
    copyCode(code) {
      navigator.clipboard.writeText(code).then(() => {
        alert('代码已复制到剪贴板');
      }).catch(err => {
        console.error('复制失败', err);
      });
    }
  },
  mounted() {
    // 初始化 highlight.js
    document.querySelectorAll('pre code').forEach((block) => {
      hljs.highlightBlock(block);
    });
  }
};
</script>

<style scoped>
.documentation {
  display: flex;
  scroll-behavior: smooth;
}

.content-wrapper {
  display: flex;
  flex: 1;
}

.sidebar {
  width: 250px;
  padding: 2rem;
  background-color: #2a2a2a;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.sidebar h2 {
  margin-bottom: 1.5rem;
}

.sidebar ul {
  list-style: none;
  padding: 0;
}

.sidebar li {
  margin: 1rem 0;
}

.sidebar a {
  color: #ffffff;
  text-decoration: none;
  transition: color 0.2s;
  position: relative;
  display: block;
  padding: 0.5rem 1rem;
}

.sidebar a.active {
  color: #6478ff;
}

.sidebar a.active::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 60%;
  background-color: #6478ff;
  border-radius: 2px;
}

.sidebar a:hover {
  color: #6478ff;
}

.content {
  flex: 1;
  padding: 2rem;
  max-width: 800px;
  margin: 0 auto;
}

.content h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.content h2 {
  font-size: 2rem;
  margin-top: 2rem;
}

.content p {
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

@media (max-width: 768px) {
  .content-wrapper {
    flex-direction: column;
  }
  
  .sidebar {
    width: 100%;
    height: auto;
    position: static;
  }
}


.code-content{
  width: 100%;
  display: block;
  margin: 0 auto;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #f5f5f5;
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  font-size: 14px;
  position: relative;
  min-height: 100px;
  padding-top:30px ;
  color: #2a2a2a;
}
.copy-btn {
  position: absolute;
  top: 5px;
  right: 5px;
  background-color: #6478ff;
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 4px;

}

.copy-btn:hover {
  background-color: #5a67d8;

}
</style>
